$ballSize: 10px;
$containerSize: 150px;
$n: 32;
$pDog: 360deg/$n;

* {
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    background-color: #64c6ee;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading {
    width: $containerSize;
    height: $containerSize;
    border-radius: 50%;
    // border: 1px solid #315efb;
    position: relative;
}

.dot {
    position: absolute;
    top: 0;
    left: 50%;
    // background: #315efb;
    width: $ballSize;
    height: $ballSize;
    margin-top: -$ballSize/2;
    margin-left: -$ballSize/2;
    transform-origin: center $containerSize / 2 + $ballSize / 2;
    $duration: 2s;

    @for $i from 1 through $n {
        &:nth-child(#{$i}) {
            transform: rotate(($i - 1) * $pDog);

            &::before,
            &::after {
                animation-delay: -$duration /$n *($i - 1) *6;
            }
        }
    }

    &::before,
    &::after {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        content: "";
    }

    perspective: 70px;
    transform-style: preserve-3d;

    &::before {
        background-color: #333;
        top: -100%;
        animation: rotate-black $duration infinite;

        @keyframes rotate-black {
            0% {
                animation-timing-function: ease-in;
            }

            25% {
                transform: translate3d(0, 100%, $ballSize);
                animation-timing-function: ease-out;
            }

            50% {
                transform: translate3d(0, 200%, 0);
                animation-timing-function: ease-in;
            }

            75% {
                transform: translate3d(0, 100%, -$ballSize);
                animation-timing-function: ease-out;
            }
        }
    }

    &::after {
        background-color: #fff;
        top: 100%;
        animation: rotate-white $duration infinite;

        @keyframes rotate-white {
            0% {
                animation-timing-function: ease-in;
            }

            25% {
                transform: translate3d(0, -100%, -$ballSize);
                animation-timing-function: ease-out;
            }

            50% {
                transform: translate3d(0, -200%, 0);
                animation-timing-function: ease-in;
            }

            75% {
                transform: translate3d(0, -100%, $ballSize);
                animation-timing-function: ease-out;
            }
        }
    }
}